<!DOCTYPE html>
<!--<html lang="zh-cmn" xmlns:th="http://www.w3.org/1999/xhtml">-->
<html lang="zh-cmn" xmlns:th="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Xenon Boostrap Admin Panel" />
    <meta name="author" content="" />
    <base th:href="@{/}"/>
    <title></title>
    <link rel="stylesheet" th:href="@{/css/bootstrap.css}"/>
    <link rel="stylesheet" th:href="@{/css/fonts/linecons/css/linecons.css}"/>
    <link rel="stylesheet" th:href="@{/css/fonts/fontawesome/css/font-awesome.min.css}"/>
    <link rel="stylesheet" th:href="@{/css/bootstrap.css}"/>
    <link rel="stylesheet" th:href="@{/css/xenon-core.css}"/>
    <link rel="stylesheet" th:href="@{/css/xenon-forms.css}"/>
    <link rel="stylesheet" th:href="@{/css/xenon-components.css}"/>
    <link rel="stylesheet" th:href="@{/css/xenon-skins.css}"/>
    <link rel="stylesheet" th:href="@{/css/custom.css}"/>
    <link rel="stylesheet" th:href="@{/res/css/depot1.css}"/>
    <link rel="stylesheet" th:href="@{/css/sweetalert2.min.css}"/>
    <link rel="stylesheet" th:href="@{/js/toastr/toastr.min.css}"/>
    <link rel="stylesheet" th:href="@{/css/bootstrap-table.css}"/>
    <script type="application/javascript" th:src="@{/js/jquery-1.11.1.min.js}"></script>
</head>
<body class="page-body">
<div class="settings-pane">
    <a href="#" data-toggle="settings-pane" data-animate="true">
        &times;
    </a>
    <div class="settings-pane-inner">
        <div class="row">
            <div class="col-md-4">
                <div class="user-info">
                    <div class="user-image">
                        <a href="#">
                            <img src="" class="img-responsive img-circle" />
                        </a>
                    </div>
                    <div class="user-details">
                        <h3>
                            <a href="">John Smith</a>
                            <span class="user-status is-online"></span>
                        </h3>
                        <p class="user-title">Web Developer</p>
                        <div class="user-links">
                            <a href="" class="btn btn-primary">Edit Profile</a>
                            <a href="" class="btn btn-success">Upgrade</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-8 link-blocks-env">
                <div class="links-block left-sep">
                    <h4>
                        <span>Notifications</span>
                    </h4>
                    <ul class="list-unstyled">
                        <li>
                            <input type="checkbox" class="cbr cbr-primary" checked="checked" id="sp-chk1" />
                            <label for="sp-chk1">Messages</label>
                        </li>
                        <li>
                            <input type="checkbox" class="cbr cbr-primary" checked="checked" id="sp-chk2" />
                            <label for="sp-chk2">Events</label>
                        </li>
                        <li>
                            <input type="checkbox" class="cbr cbr-primary" checked="checked" id="sp-chk3" />
                            <label for="sp-chk3">Updates</label>
                        </li>
                        <li>
                            <input type="checkbox" class="cbr cbr-primary" checked="checked" id="sp-chk4" />
                            <label for="sp-chk4">Server Uptime</label>
                        </li>
                    </ul>
                </div>

                <div class="links-block left-sep">
                    <h4>
                        <a href="#">
                            <span>Help Desk</span>
                        </a>
                    </h4>

                    <ul class="list-unstyled">
                        <li>
                            <a href="#">
                                <i class="fa-angle-right"></i>
                                Support Center
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <i class="fa-angle-right"></i>
                                Submit a Ticket
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <i class="fa-angle-right"></i>
                                Domains Protocol
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <i class="fa-angle-right"></i>
                                Terms of Service
                            </a>
                        </li>
                    </ul>
                </div>

            </div>

        </div>

    </div>

</div>

<div class="page-container">
    <div class="main-content">
        <div class="page-title">
            <div class="title-env">
                <h1 class="title">仓库 管理</h1>
                <p class="description">可以对仓库进行一系列操作以及管理</p>
            </div>

            <div class="breadcrumb-env">

                <ol class="breadcrumb bc-1">
                    <li>
                        <a href="#"><i class="fa-home"></i>首页</a>
                    </li>
                    <li>
                        <a href="#">导航</a>
                    </li>
                    <li class="active">
                        <strong>仓库管理</strong>
                    </li>
                </ol>

            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title" id="ck">仓库管理</h3>
            </div>
            <div class="panel-body text-center">
                <a href="javascript:void(0);" onclick="updateStoreInfo()" class="btn btn-blue btn-icon update">
                    <i class="fa-wrench"></i>
                    <span>修改仓库信息</span>
                </a>
                <a href="javascript:void(0);" onclick="depotAdd()" class="btn btn-secondary btn-icon add">
                    <i class="fa-fire"></i>
                    <span>添加仓库</span>
                </a>
                <a href="javascript:void(0);" onclick="delStoreInfo()" class="btn btn-red btn-icon delete">
                    <i class="fa-remove"></i>
                    <span>删除仓库</span>
                </a>
                <script type="text/javascript">
                    jQuery(document).ready(function($)
                    {
                        $("#example-1").dataTable({
                            aLengthMenu: [
                                [10, 25, 50, 100, -1],[10, 25, 50, 100, "All"]
                            ]
                        });
                    });
                </script>

                <table id="storeTable" class="table table-striped table-bordered text-primary" id="example-1">
                    <thead>
                    <tr class="replace-inputs">
                        <th class="text-center"><input type="checkbox" class="cbr"/></th>
                        <th>仓库编号</th>
                        <th>仓库名称</th>
                        <th>覆盖地区</th>
                        <th>描述</th>
                        <th>仓库状态(启用/停用)</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr th:each="sto:${store}">
                        <td><input type="checkbox" name="storeInfoId" class="cbr" th:attr="value=${sto.storeInfoId}"/></td>
                        <td th:text="${sto.storeInfoId}"></td>
                        <td th:text="${sto.storeInfoName}"></td>
                        <td >
                            <div th:each="area:${sto.areaInfo}">
                                <span th:text="${area}"></span>
                            </div>
                        </td>
                        <td th:text="${sto.storeInfoDesc}"></td>
                        <td>
                            <!--<span th:text="${sto.storeInfoState==0?'启用':'停用'}"></span>-->
                            <div th:switch="${sto.storeInfoState}" id="disStat">
                                <span th:case="0" class="cang-state btn btn-success btn-xs" th:data="0"  onclick="stateClick(this)">启用</span>
                                <span th:case="1" class="cang-state btn btn-red btn-xs" th:data="1" onclick="stateClick(this)">停用</span>
                            </div>
                        </td>
                    </tr>
                    </tbody>
                </table>

            </div>
        </div>
    </div>
</div>

<div id="depotForm">
    <form class="form-horizontal">
        <div class="form-group">
            <input type="hidden" name="discountId"/>
            <label class="control-label col-md-3">仓库名称：</label>
            <div class="col-md-7">
                <input type="text" name="storeInfoName" class="form-control" placeholder="请输入仓库名称">
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-md-3" style="padding-top: 38px;">覆盖地区：</label>
            <div class="col-md-7">
                <div class="col-md-6" style="padding-left: 0px;">
                    <select name="sellAreaId" id="dart" class="form-control" onchange="dartChange(this)">
                        <option value="-1">--请选择--</option>
                    </select>
                    <select name="sellAreaId" id="city" class="form-control" onchange="cityChange(this)">
                        <option value="-1">--请选择--</option>
                    </select>
                    <select name="sellAreaId" id="district" class="form-control" onchange="disChange(this)">
                        <option value="-1">--请选择--</option>
                    </select>
                </div>
                <div class="bootstrap-tagsinput pull-right mod" style="width: 150px;height:96px; overflow:auto;">
                    <!--预览选择的地区信息-->
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-md-3">仓库状态：</label>
            <div class="col-md-7">
                <label class="radio-inline">
                    <input type="radio" name="storeInfoState" checked="checked" value="0" id="start">启用
                </label>
                <label class="radio-inline">
                    <input type="radio" name="storeInfoState" value="1" id="stop">停用
                </label>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-md-3">仓库描述：</label>
            <div class="col-md-7">
                <textarea name="storeInfoDesc" class="form-control"></textarea>
            </div>
        </div>
    </form>
</div>

<link rel="stylesheet" th:href="@{/js/datatables/dataTables.bootstrap.css}"/>
<script type="application/javascript" th:src="@{/js/bootstrap.min.js}"></script>
<script type="application/javascript" th:src="@{/js/TweenMax.min.js}"></script>
<script type="application/javascript" th:src="@{/js/resizeable.js}"></script>
<script type="application/javascript" th:src="@{/js/joinable.js}"></script>
<script type="application/javascript" th:src="@{/js/xenon-api.js}"></script>
<script type="application/javascript" th:src="@{/js/xenon-toggles.js}"></script>
<script type="application/javascript" th:src="@{/js/datatables/js/jquery.dataTables.js}"></script>
<script type="application/javascript" th:src="@{/js/datatables/dataTables.bootstrap.js}"></script>
<script type="application/javascript" th:src="@{/js/datatables/yadcf/jquery.dataTables.yadcf.js}"></script>
<script type="application/javascript" th:src="@{/js/datatables/tabletools/dataTables.tableTools.min.js}"></script>
<script type="application/javascript" th:src="@{/js/bootstrap-table.js}"></script>
<script type="application/javascript" th:src="@{/js/bootstrap-table-zh-CN.js}"></script>
<script type="application/javascript" th:src="@{/js/xenon-custom.js}"></script>
<script type="application/javascript" th:src="@{/js/sweetalert2.min.js}"></script>
<script type="application/javascript" th:src="@{/js/toastr/toastr.min.js}"></script>
<script type="application/javascript" th:src="@{/js/jquery.form.min.js}"></script>
<script type="application/javascript" th:src="@{/js/public/dataTable.js}"></script>
<script type="application/javascript" th:src="@{/js/commModal.js}"></script>


</body>
<script>
    $(function(){
        /*初始化添加和修改的模态框*/
        initialAddAndUpdateModel();
        //添加仓库信息时加载一级地区信息
        initFirstArea();
    })

    /*初始化商品属性名添加修改模态框*/
    function initialAddAndUpdateModel() {
        $("#depotForm").dialog({});
    }

    //初始化toastr弹框
    toastr.options = {
        closeButton: true,
        debug: true,
        progressBar: true,
        positionClass: "toast-top-right",
        showDuration: "300",
        hideDuration: "1000",
        timeOut: "5000",
        extendedTimeOut: "1000",
        showEasing: "swing",
        hideEasing: "linear",
        showMethod: "fadeIn",
        hideMethod: "fadeOut"
    };

    //修改仓库状态
    function stateClick(span){
        var $this = $(span);
        var stateId = $this.attr("data");
        var stateVal = stateId==0?"停用":"启用";
        var storeId = $this.parent().parent().parent().children(":eq(1)").html();
        swal({
            title:"提示",
            text:"仓库状态即将改变为"+stateVal,
            type:"warning",
            showCancelButton:true,
            closeOnConfirm:false,
            confirmButtonText:"修改",
            cancelButtonText: '取消',
            confirmButtonClass: 'btn btn-success',
            cancelButtonClass: 'btn btn-danger',
        }).then(function(isConfirm){
            var param = "stateId="+stateId+"&storeId="+storeId;
            if (isConfirm === true) {
                $.post("depot/updateState",param,function(flag){
                    if(flag=="true"){
                        toastr["success"]("仓库状态修改成功!","操作提示");
                        if(stateId==0){
                           // $this.parent().children().remove();
                            $this.parent().html('<span class="cang-state btn btn-red btn-xs" onclick="stateClick(this)" data="1">停用</span>');
                        } else if(stateId==1){
                            $this.parent().html('<span class="cang-state btn btn-success btn-xs" onclick="stateClick(this)" data="0">启用</span>');
                        }
                    } else if(flag=="false") {
                        toastr["error"]("系统繁忙,请稍后再试!","操作提示");
                    }
                },"text");
            }
        })
       /* swal({
            title: 'Are you sure?',
            text: "You won't be able to revert this!",
            type: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Yes, delete it!',
            cancelButtonText: 'No, cancel!',
            confirmButtonClass: 'btn btn-success',
            cancelButtonClass: 'btn btn-danger',
            buttonsStyling: false
        }).then(function(isConfirm) {
            if (isConfirm === true) {
                swal(
                    'Deleted!',
                    'Your file has been deleted.',
                    'success'
                );
            } else if (isConfirm === false) {
                swal(
                    'Cancelled',
                    'Your imaginary file is safe :)',
                    'error'
                );
            } else {
                // Esc, close button or outside click
                // isConfirm is undefined
            }
        })*/
    }

    /*添加仓库信息*/
    function depotAdd() {
        $("#depotForm").find("form").resetForm();
        $("div.mod").children().remove();
        $("select#city").children(":gt(0)").remove();
        $("select#district").children(":gt(0)").remove();
        $("#depotForm").dialog({
            title:'添加仓库信息',
            btnValue:'添加',
            type:'update',
            btnBind:function () {
               var storeInfoName = $("div#depotForm form input[name='storeInfoName']").val();
                var storeInfoState = $("div#depotForm form input[name='storeInfoState']:checked").val();
                var storeInfoDesc = $("div#depotForm form textarea[name='storeInfoDesc']").val();
                var areaId = $("span.tag").map(function(){
                    return $(this).attr("data");
                }).get().join(",");
                var param = "storeInfoName="+storeInfoName+"&storeInfoState="+storeInfoState+"&storeInfoDesc="+storeInfoDesc+"&sellAreaId="+areaId;
                $.post("depot/saveStoreInfo",param,function(flag){
                    if(flag=="true"){
                        $("#depotForm").dialog("close");
                        swal(
                            '操作提示',
                            '仓库信息添加成功',
                            'success'
                        ).then(function(){
                            location.href="depot/depot.html";
                        });
                    }else{
                        swal(
                            '操作提示',
                            '系统繁忙,请稍后再试!',
                            'error'
                        );
                    }
                },"text");
            }
        })
        $("#depotForm").dialog("open");
    }

    //修改仓库信息
    function updateStoreInfo(){
        var chk_value =[];//定义一个数组
        $('.table tr td input[name="storeInfoId"]:checked').each(function(){
            chk_value.push($(this).val());//将选中的值添加到数组chk_value中
        });
        if(chk_value.length!=1){
            swal(
                '警告!',
                '必须选择一项且只能选择一项待修改!',
                'warning'
            );
            return;
        }

        //打开模态框并加载待修改的信息
        var param = "storeInfoId="+chk_value[0];
        $.post("depot/searchInfoById",param,function(storeInfo){
            $("div#depotForm form input[name='storeInfoName']").val(storeInfo.storeInfoName);
            if(storeInfo.storeInfoState==0){
                $("div#depotForm form input#stop").removeAttr("checked");
                $("div#depotForm form input#start").attr("checked","true");
            } else if(storeInfo.storeInfoState==1){
                $("div#depotForm form input#start").removeAttr("checked");
                $("div#depotForm form input#stop").attr("checked","true");
            }
            $("div#depotForm form textarea[name='storeInfoDesc']").val(storeInfo.storeInfoDesc);
            $('<input name="storeInfoId" value="'+storeInfo.storeInfoId+'" type="hidden"/>').appendTo("div#depotForm form");
            //加载覆盖地区
            var sellAreaIds = storeInfo.sellAreaId.split(',');
            $(storeInfo.areaInfo).each(function(index){
                $('<div><span class="tag label label-info" style="margin-bottom: 4px;" data="'+sellAreaIds[index]+'">\n' +
                    '<font style="vertical-align: inherit;">\n' +
                    '<font style="vertical-align: inherit;">'+ this.replace(/\s/g,"")+'</font>\n' +
                    '</font>\n' +
                    '<span data-role="remove" class="remove" onclick="removeBiaoQian(this)"></span>\n' +
                    '</span></div>').appendTo("div.mod");
            });
        },"json");

        $("#depotForm").find("form").resetForm();
        $("div.mod").children().remove();
        $("select#city").children(":gt(0)").remove();
        $("select#district").children(":gt(0)").remove();
        $("#depotForm").dialog({
            title:'修改仓库信息',
            btnValue:'修改',
            type:'update',
            btnBind:function () {
                var storeInfoName = $("div#depotForm form input[name='storeInfoName']").val();
                var storeInfoState = $("div#depotForm form input[name='storeInfoState']:checked").val();
                var storeInfoDesc = $("div#depotForm form textarea[name='storeInfoDesc']").val();
                var storeInfoId = $("div#depotForm form input[name='storeInfoId']").val();
                var areaId = $("span.tag").map(function(){
                    return $(this).attr("data");
                }).get().join(",");
                var param = "storeInfoName="+storeInfoName+"&storeInfoState="+storeInfoState+"&storeInfoDesc="+storeInfoDesc+"&sellAreaId="+areaId+"&storeInfoId="+storeInfoId;
                $.post("depot/updateStoreInfo",param,function(flag){
                    if(flag=="true"){
                        $("#depotForm").dialog("close");
                        swal(
                            '操作提示',
                            '仓库信息修改成功',
                            'success'
                        ).then(function(){
                            location.href="depot/depot.html";
                        });
                    }else{
                        swal(
                            '操作提示',
                            '系统繁忙,请稍后再试!',
                            'error'
                        );
                    }
                },"text");
            }
        })
        $("#depotForm").dialog("open");

    }

    //删除覆盖区域的城市
    function removeBiaoQian(span){
        var $this = $(span);
        $this.parent().remove();
    }

    //添加仓库信息时加载一级地区信息
    function initFirstArea(){
        $.getJSON("depot/getFirstArea",function (areas) {
            $(areas).each(function () {
                var $op = $("<option></option>").appendTo($("select#dart"));
                $op.html(this.dtArea.areaName);
                $op.attr("value",this.sellAreaId);
            })
        })
    }

    //选择省时加载属于该省的城市
    function dartChange(op){
        $("select#city").children(":gt(0)").remove();
        $("select#district").children(":gt(0)").remove();
        var areaId = $('#dart option:selected').val();
        var param = "pId="+areaId;
        $.getJSON("depot/getAreaByPid",param,function (areas) {
            $(areas).each(function () {
                var $op = $("<option></option>").appendTo("select#city");
                $op.html(this.dtArea.areaName);
                $op.attr("value",this.sellAreaId);
            })
        })
    }

    //选择市时加载属于该市的下级区域
    function cityChange(){
        $("select#district").children(":gt(0)").remove();
        var areaId = $('#city option:selected').val();
        var param = "pId="+areaId;
        $.getJSON("depot/getAreaByPid",param,function (areas) {
            $(areas).each(function () {
                var $op = $("<option></option>").appendTo("select#district");
                $op.html(this.dtArea.areaName);
                $op.attr("value",this.sellAreaId);
            })
        })
    }

    //选择三级地区后把完整地区加载到预览区域
    function disChange(){
        var dart = $('#dart option:selected').text();//选中的文本
        var city = $('#city option:selected').text();//选中的文本
        var district = $('#district option:selected').text();//选中的文本
        var areaId = $('#district option:selected').val();//选中的value值
        var area = dart+city+district;
        var flag="true";
        $("span.tag").each(function(){
            if($(this).attr("data")==areaId){
                flag="false";
            }
        });
        if(flag=="true"){
            $('<div><span class="tag label label-info" style="margin-bottom: 4px;" data="'+areaId+'">\n' +
                '<font style="vertical-align: inherit;">\n' +
                '<font style="vertical-align: inherit;">'+area+'</font>\n' +
                '</font>\n' +
                '<span data-role="remove" class="remove" onclick="removeBiaoQian(this)"></span>\n' +
                '</span></div>').appendTo("div.mod");
        }
    }

    function delStoreInfo(){
        var chk_value =[];//定义一个数组
        $('.table tr td input[name="storeInfoId"]:checked').each(function(){
            chk_value.push($(this).val());//将选中的值添加到数组chk_value中
        });
        if(chk_value.length==0){
            swal(
                '警告!',
                '必须选择一项待删除!',
                'warning'
            );
            return;
        }

        swal({
            title:"提示",
            text:"确定删除选中的仓库信息?",
            type:"warning",
            showCancelButton:true,
            closeOnConfirm:false,
            confirmButtonText:"删除",
            cancelButtonText: '取消',
            confirmButtonClass: 'btn btn-success',
            cancelButtonClass: 'btn btn-danger',
        }).then(function(isConfirm){
            if (isConfirm === true) {
                var param = $(chk_value).map(function(){
                    return "storeIds="+this;
                }).get().join("&");
                $.post("depot/batchDelStoreInfo",param,function(flag){
                    if(flag=="true"){
                        swal(
                            '操作提示',
                            '仓库信息删除成功!',
                            'success'
                        ).then(function(){
                            location.href="depot/depot.html";
                        });
                    }else{
                        swal(
                            '操作提示',
                            '系统繁忙,请稍后再试!',
                            'error'
                        );
                    }
                },"text");
            }
        })
    }
</script>
</html>